<template>
    <div>
        <div class="card" ref="chartRef" style="width: 600px; height: 500px;display:inline-block;margin-right: 20px"></div>
        <!-- <div class="card" ref="chartRef2" style="width: 600px; height: 500px;display:inline-block"></div> -->
        <div  style="width: 600px; height: 500px;display:inline-block" class="card">
          <ECharts3DPie/>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import ECharts3DPie from '@/components/Echarts3DPie.vue';

const chartRef = ref(null);
const chartRef2 = ref(null);
let chartInstance = null;
let chartInstance2 = null;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  
  chartInstance = echarts.init(chartRef.value);
  
  const option = {
    title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
            itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
        }
    ]
    };


  chartInstance.setOption(option);
  
};
// 初始化图表
const initChart2 = () => {
  if (!chartRef2.value) return;
  
  chartInstance2 = echarts.init(chartRef2.value);
  
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };

  chartInstance2.setOption(option);
  
};


onMounted(() => {
  initChart();
  initChart2();
});

</script>